<template>
  <div>
    <div ref="chartContainer" style="width: 100%; height: 300px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { useLand } from "../../../api/api";
export default {
  props: {
    legendData: {
      type: Array,
      default: () => [],
    },
    form: {
      typere: Object,
      default: () => {},
    },
    drr1: {
      type: Array,
      default: () => [],
    },
    drr2: {
      type: Array,
      default: () => [],
    },
    drr3: {
      type: Array,
      default: () => [],
    },
    drr4: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      chartInstance: null,
      user: JSON.parse(localStorage.getItem("user")),
    };
  },
  watch: {
    legendData: {
      immediate: true,
      handler(newLegendData) {
        if (this.chartInstance) {
          this.chartInstance.setOption({
            legend: {
              data: newLegendData,
            },
            // series: [
            //   {
            //     name: this.legendData[0],
            //     data: [120, 200, 150, 80, 70, 110, 130],
            //     type: "bar",
            //   },
            //   {
            //     name: this.legendData[1],
            //     data: [120, 200, 150, 80, 70, 110, 130],
            //     type: "bar",
            //   },
            //   {
            //     name: this.legendData[2],
            //     data: [120, 200, 150, 80, 70, 110, 130],
            //     type: "bar",
            //   },
            // ],
          });
        }
      },
    },
  },
  mounted() {
    console.log(this.drr1, "form");
    this.dataSource();
  },
  methods: {
    async dataSource() {
      const arr = this.form.xmld1.concat(
        this.form.xmld2,
        this.form.xmld3,
        this.form.xmld4
      );
      const brr = this.drr1.concat(this.drr2, this.drr3, this.drr4);
      const params = {
        area: this.user.role == "xian" ? this.user.fkDept : this.form.area,
        city:
          this.user.role == "xian" || this.user.role == "shi"
            ? this.user.fkDept.slice(0, 4)
            : "3700",
        types: "",
        xmlds: "",
        xmxls: "",
        jsrq: this.form.endtime,
        ksrq: this.form.begintime,
        sblx: this.form.sblx,
        xmjd: this.form.xmjd,
        type: this.form.type.length == 0 ? "" : this.form.type.join(","),
        keyWord: this.form.keyWord,
        xmld: brr.length == 0 ? "" : brr.join(","),
        xmxl: arr.length == 0 ? "" : arr.join(","),
      };
      const data = await useLand(params);
      var cityname;
      var xmZydmj;
      var yzSyndtmj;
      var zzSyndtmj;
      cityname = data.result.map((item) => item.cityname);
      if (this.form.isxztb == 1) {
        xmZydmj = data.result.map((item) => item.xmZydmj);
        yzSyndtmj = data.result.map((item) => item.yzSyndtmj);
        zzSyndtmj = data.result.map((item) => item.zzSyndtmj);
      } else {
        xmZydmj = data.result.map((item) => item.xmgs);
        yzSyndtmj = data.result.map((item) => item.yzSyndtmjC);
        zzSyndtmj = data.result.map((item) => item.zzSyndtmjC);
      }
      this.chartInstance = echarts.init(this.$refs.chartContainer);
      let option = {
        xAxis: {
          axisLabel: {
            interval: 0, // 强制显示所有标签
            rotate: -45, // 将标签旋转 45 度
          },
          type: "category",
          data: cityname,
        },
        legend: {
          data: this.legendData,
        },
        tooltip: {
          trigger: "axis",
        },
        calculable: true,
        yAxis: {
          type: "value",
        },
        toolbox: {
          show: true,
        },

        calculable: true,
        series: [
          {
            name: this.legendData[0],
            data: xmZydmj,
            type: "bar",
            itemStyle: {
              // 设置柱子的颜色
              color: "#26879F",
            },
            barWidth: '20' 
          },
          {
            name: this.legendData[1],
            data: yzSyndtmj,
            type: "bar",
            color: "#A8D7E9",
            barWidth: '20' 
          },
          {
            name: this.legendData[2],
            data: zzSyndtmj,
            type: "bar",
            color: "#D3FCE0",
            barWidth: '20' 
          },
        ],
        grid: {
          x: 30,
          y: 50,
          x2: 30,
          y2: 35,
        },
      };
      this.chartInstance.setOption(option);
      //窗口缩放后重新调整图标尺寸
      window.onresize = function () {
        this.chartInstance.resize();
      };
    },
  },
};
</script>

<style lang="less" scoped>

</style>